<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 商品列表
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.name" placeholder="编号" class="handle-input mr10" >
				</el-input>
				<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
				<el-button type="primary" icon="el-icon-rank" @click="handleAdd">新增</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column prop="pid" label="编号" width="55" align="center">
					<template slot-scope="scope">{{scope.row.pid}}</template>
				</el-table-column>
				<el-table-column prop="pname" label="商品名称">
					<template slot-scope="scope">{{scope.row.pname}}</template>
				</el-table-column>
				<el-table-column label="商品价格" prop="pprice">
					<template slot-scope="scope">¥ {{scope.row.pprice}}</template>
				</el-table-column>
				<el-table-column label="图片(查看大图)" align="center" prop="pimg">
					<template slot-scope="scope">
						<el-image class="table-td-thumb" :src="scope.row.pimg" :preview-src-list="[scope.row.pimg]"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="pdesc" label="商品描述">
					<template slot-scope="scope">{{scope.row.pdesc}}</template>
				</el-table-column>
				<el-table-column prop="uid" label="库存">
					<template slot-scope="scope">{{scope.row.uid}}</template>
				</el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDel(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

		</div>
		<!-- auto-complete="off" -->
		<!--编辑界面-->
		<el-dialog title="编辑"  :visible.sync="dialogVisible"  :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="商品名称">
					<el-input v-model="editForm.pname" ></el-input>
				</el-form-item>
				<el-form-item label="商品价格">
					<el-input v-model="editForm.pprice" ></el-input>
				</el-form-item>
				<el-form-item label="图片地址">
					<el-input v-model="editForm.pimg" ></el-input>
				</el-form-item>
				<el-form-item label="商品描述">
					<el-input type="textarea" v-model="editForm.pdesc"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" >提交</el-button>
			</div>
		</el-dialog>
		<!--新增界面-->
		<el-dialog title="新增" :visible.sync="adddialogVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="商品名称">
					<el-input v-model="addForm.pname" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="商品价格">
					<el-input v-model="addForm.pprice" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="图片地址">
					<el-input v-model="addForm.pimg" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="商品描述">
					<el-input type="textarea" v-model="addForm.pdesc"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="adddialogVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" >提交</el-button>
			</div>
		</el-dialog>
		
		<!--搜索界面-->
		<el-dialog title="搜索" :visible.sync="searchdialogVisible" :close-on-click-modal="false">
			<el-form :model="searchForm" label-width="80px" :rules="searchFormRules" ref="searchForm">
				<el-form-item label="商品名称">
					<el-input v-model="searchForm.pname" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="商品价格">
					<el-input v-model="searchForm.pprice" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="图片地址">
					<el-input v-model="searchForm.pimg" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="商品描述">
					<el-input type="textarea" v-model="searchForm.pdesc"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="searchdialogVisible = false">取消</el-button>
				
			</div>
		</el-dialog>
		<!-- 分页 -->
		<el-pagination
			  @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page.sync="listQuery.pagenum"
		      :page-size="5"
			  :page-sizes="[5,10,15]"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		
		
		
		
		
		
		
		
		
	</div>
</template>

<script>
	import * as api from '../../api/getshangpinlist'
	// import util from '../../utils/utils'
	import axios from 'axios'
	let token=localStorage.getItem('token')
	
	const defaultListQuery = {
	  pagenum: 3,
	  pagesize: 5,
	 
	};
	
	
	
	
	export default {
		name: 'shangpinlist',
		data() {
			return {
				listQuery: Object.assign({}, defaultListQuery),
				multipleSelection: [],
				filters: {
					name: ''
				},
				query: {
					name: '',
				},
				tableData: [],
				total:'',
				listLoading: false,
				editLoading: false,
				dialogVisible:false,
				
				editFormRules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}]
				},
				//编辑界面数据
				editForm: {
					pid: '',
					pimg: '',
					pname: '',
					pprice: '',
					pdesc: '',
					uid:''
				},
				adddialogVisible:false, //新增界面是否显示
				addLoading: false,
				addFormRules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}]
				},
				//新增界面数据
				addForm: {
					uid:26038,
					pname: '',
					pprice: '',
					pimg: '',
					pdesc: ''
				},
				//查询界面数据
				searchForm: {
					
					pname: '',
					pprice: '',
					pimg: '',
					pdesc: '',
				},
				searchdialogVisible:false, //查询界面是否显示
				searchLoading: false,
				searchFormRules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}]
				},
				//分页
						
				        currentPage4: 1
				

		}
			
		},
		created() {
			this.getData()	
		},
		mounted() {
			api.getshangpinlist({pagesize:100}).then(data => {
				this.total = data.data.data.length
			})
			
		},
		methods: {
			// 获取 easy-mock 的模拟数据
			getData() {
				api.getshangpinlist(this.listQuery).then(data => {
					console.log(data.data.data)
					this.tableData = data.data.data
				})
			},
			// 分页
				handleSizeChange(val) {
					this.listQuery.pagenum = 1;
					this.listQuery.pagesize = val;
					this.getData();
				      },
				  handleCurrentChange(val) {
						this.listQuery.pagenum = val;
						this.getData();
				  },
			//搜索
			search:function(){
				this.searchdialogVisible = true;
				// console.log(this.editFormVisible)
				
				
				
				api.getdetaillist({id:this.query.name}).then((res) => {
						// console.log(res.data.data)
						this.searchForm = {
							
							pname: res.data.data.pname,
							pprice:res.data.data.pprice,
							pimg: res.data.data.pimg,
							pdesc:res.data.data.pdesc
						};
					
				}).catch(() => {
				
				});
			},
			handleDel: function(index, row) {
				console.log(token)
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = {
						pid: row.pid,
						uid:26038,
						token:token
					};
					api.getdeletelist(para).then((res) => {
						console.log(res)
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getData();
					});
				}).catch(() => {
				
				});
				
			},
			// 编辑操作
			handleEdit: function(index, row) {
				this.dialogVisible = true;
				// console.log(this.editFormVisible)
				this.editForm = Object.assign({}, row);
				// console.log(this.editForm)

			},
			
			// 保存编辑
			editSubmit: function() {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							//NProgress.start();
							let para = Object.assign({}, this.editForm);
							// console.log(para)
							api.getupdatelist(para).then((res) => {
								// console.log(res.data)
								this.editLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getData();
							});
						});
					}
				});
			},
			
			//显示新增界面
			handleAdd: function() {
				
				this.adddialogVisible = true;
				this.addForm = {
					uid: 26038,
					pname: '',
					pprice: '',
					pimg: '',
					pdesc: ''
				};
				console.log(this.addForm)
			},
			//保存新增
			addSubmit: function() {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							//NProgress.start();
							let para = Object.assign({}, this.addForm);
							console.log(para)
							api.getaddlist(para).then((res) => {
								console.log(res.data)
								this.addLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getData();
							});
						});
					}
				});
			},


		},
		

	}
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>
